import React, { useEffect, useState } from 'react'
import { Table, message, Form, Space, Tag, Button, Modal, Drawer, Checkbox, Input, Radio, Popconfirm, Card } from "antd"
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import type { TableRowSelection } from 'antd/es/table/interface';
import api from '@/api'
import TextArea from 'antd/es/input/TextArea';

export default function Goodclass() {
    const [serclassList, setSerclassList] = useState([])
    const [closer, setCloser] = useState(false);
    const [open, setOpen] = useState(false);
    const [form1] = Form.useForm();
    const [form] = Form.useForm();
    useEffect(() => {
        getClasslist()
    }, [])
    const getClasslist = async () => {
        const res = await api.serveclass.getAllGoodstype()
        console.log("获取全部分了", res);
        const a = getmenu(res.data.data)
        console.log(a);
        setSerclassList(a)
    }
    //递归函数
    const getmenu = (arr: any): any => {
        const list: Array<any> = []
        arr.forEach((item: any) => {
            if (item.childrenpath == 0) {
                list.push(item)
                item.children = []
            } else {
                if (list && list.length > 0) {
                    list.forEach((thing) => {
                        if (item.childrenpath == thing.id) {
                            thing.children.push(item)
                        }
                    })
                }
            }
        });
        return list
    }
    const updateDetail = (arg: any, i: number) => {
        console.log("arg", arg, i);
        form.setFieldsValue({
            name: arg.name,
            childrenpath: arg.childrenpath,
            id: arg.id
        })
        setOpen(true);
    }
    const addserveclass = () => {
        setCloser(true);
    }
    const onClose = () => {
        form1.resetFields()
        setCloser(false);
        form.resetFields()
        setOpen(false);
    };
    //新增
    const onFinish1 = async (values: any) => {
        console.log('Success:', values);
        values.childrenpath = Number(values.childrenpath)
        const res = await api.serveclass.addGoodstype(values)
        message.success(res.data.msg)
        setCloser(false);
        getClasslist()
    };
    const onFinishFailed1 = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    //修改
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        const res = await api.serveclass.updateGoodstype(values)
        message.success(res.data.msg)
        setOpen(false);
        getClasslist()
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    const columns: ColumnsType<any> = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: 'name',
            dataIndex: 'name',
        },
        {
            title: '父级',
            dataIndex: 'childrenpath',
            render: (text, record) => (
                <>
                    {
                        record.childrenpath == 0 ? <>无</> : (record.childrenpath == 1 ? <>清洁</> :
                            (record.childrenpath == 4 ? <>维修</> : <>暂无该分类</>))
                    }
                </>
            )
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, record) => (
                <>
                    {
                        record.state == 1 ? <>使用中</> : <>下架</>
                    }
                </>
            )
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (text, record, index) => (
                <Space size="middle">
                    <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => updateDetail(record, index)} style={{ margin: '0 2px' }}></Button>
                </Space>
            ),
        },
    ];
    return (
        <div>
            <Card>
            <Button onClick={addserveclass} type='primary' shape='round' >新增分类</Button>
            {
                serclassList ? <>
                    <Table
                        columns={columns}
                        dataSource={serclassList}
                        rowKey="id"
                    />
                    <Drawer title="正在新增分类" placement="right" onClose={onClose} open={closer}>
                        <Form
                            name="add"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            layout="vertical"
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish1}
                            onFinishFailed={onFinishFailed1}
                            autoComplete="off"
                            form={form1}
                        >
                            <Form.Item label="分类名称" name="name" rules={[{ required: true, message: "请填写" }]}>
                                <Input ></Input>
                            </Form.Item>
                            <Form.Item label="父级模块" name="childrenpath" rules={[{ required: true, message: "请填写" }]}>
                                <Radio.Group >
                                    <Radio value="0"> 无 </Radio>
                                    <Radio value="1"> 清洁 </Radio>
                                    <Radio value="4"> 维修 </Radio>

                                </Radio.Group>
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Drawer>

                    <Drawer title="正在修改分类" placement="right" onClose={onClose} open={open}>
                        <Form
                            name="update"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            layout="vertical"
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                            form={form}
                        >
                            <Form.Item label="分类id" name="id" rules={[{ required: true, message: "请填写" }]}>
                                <Input disabled></Input>
                            </Form.Item>
                            <Form.Item label="分类名称" name="name" rules={[{ required: true, message: "请填写" }]}>
                                <Input ></Input>
                            </Form.Item>
                            <Form.Item label="父级模块" name="childrenpath" rules={[{ required: true, message: "请填写" }]}>
                                <Radio.Group >
                                    <Radio value="0"> 无 </Radio>
                                    <Radio value="1"> 清洁 </Radio>
                                    <Radio value="4"> 维修 </Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item label="状态" name="state" rules={[{ required: true, message: "请填写" }]}>
                                <Radio.Group >
                                    <Radio value="0"> 下架 </Radio>
                                    <Radio value="1"> 正常上架 </Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Drawer>
                </>
                    : <></>
            }
            </Card>
        </div>
    )
}
